<!-- 人事-基础设置-转正审批流程设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" :breadCrumb="breadCrumb" showBack>
      </pageHeaderNew>
    </template>
    <a-space :direction="'vertical'" class="wrap">
      <a-space :direction="'vertical'">
        <div>
          开启后，可设置绩效等级与评分的对应规则，新增考核时，系统将默认启用这些规则。
        </div>
        <a-space>
          绩效等级
          <a-switch
            v-model="levelSetting.performanceLevelSettingStatus"
            :checkedValue="1"
            :uncheckedValue="2"
            @change="changeStatus"
          />
        </a-space>
        <a-space>
          分布规则
          <a-checkbox v-model="checkValue" @change="changeStatus" />
          开启等级人数比例检查

          <a-popover title="" position="bottom">
            <icon-info-circle-fill />
            <template #content>
              <a-space :direction="'vertical'">
                <a-alert>
                  <template #title>
                    开启后，可以设置各等级人数的合理比例
                  </template>
                  如果考核结果中对应等级人数与设定不符，系统将自动检查并提醒
                </a-alert>
                <a-card>
                  <a-space>
                    <template #split>
                      <a-divider direction="vertical" />
                    </template>
                    <div>
                      <div class="level">等级S</div>
                      <a-space>
                        <span>6人</span>
                        <span>12%</span>
                        <a-tag color="red">多一人</a-tag>
                      </a-space>
                    </div>
                    <div>
                      <div class="level">等级A</div>
                      <a-space>
                        <span>8人</span>
                        <span>16%</span>
                        <a-tag color="blue">少一人</a-tag>
                      </a-space>
                    </div>
                    <div>
                      <div class="level">等级B</div>
                      <a-space>
                        <span>24人</span>
                        <span>48%</span>
                      </a-space>
                    </div>
                  </a-space>
                </a-card>
              </a-space>
            </template>
          </a-popover>
        </a-space>
      </a-space>
      <div>
        <TableTurn :tableData="getPerformanceLevelList" ref="tableRef">
          <a-table-column :width="60" data-index="" title="等级名称">
            <template #cell="{ record }">
              <a-space>
                <ColorPiker
                  v-model:color="record.color"
                  @change="change(record)"
                />
                <div>
                  <a-input
                    v-model="record.name"
                    @change="change(record, true)"
                    :error="record.error"
                  />
                  <div
                    role="alert"
                    class="arco-form-item-message"
                    v-show="record.error"
                  >
                    {{ record.msg }}
                  </div>
                </div>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column :width="90" data-index="" title="分数范围">
            <template #cell="{ record }">
              <a-space>
                <a-input-number
                  hide-button
                  class="level-input"
                  @change="change(record)"
                  v-model="record.scoreStart"
                >
                  <template #suffix> 分 </template>
                </a-input-number>
                <div class="level-lable">≤ 分数 ≤</div>
                <a-input-number
                  hide-button
                  class="level-input"
                  @change="change(record)"
                  v-model="record.scoreEnd"
                >
                  <template #suffix> 分 </template>
                </a-input-number>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column :width="90" data-index="" title="人数比例范围">
            <template #cell="{ record }">
              <a-space>
                <a-input-number
                  hide-button
                  class="level-input"
                  @change="change(record)"
                  v-model="record.scaleStart"
                >
                  <template #suffix> % </template>
                </a-input-number>
                <div class="level-lable">——</div>
                <a-input-number
                  hide-button
                  class="level-input"
                  @change="change(record)"
                  v-model="record.scaleEnd"
                >
                  <template #suffix> % </template>
                </a-input-number>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column
            :width="30"
            data-index=""
            title="操作"
            fixed="right"
            align="center"
          >
            <template #cell="{ record }">
              <a-space :size="0">
                <a-tooltip content="删除" position="left">
                  <a-popconfirm
                    content="是否确认删除该条数据?"
                    @ok="del(record.id)"
                  >
                    <icon-font
                      type="icon-delete"
                      :size="26"
                      :style="{
                        cursor: 'pointer'
                      }"
                    />
                  </a-popconfirm>
                </a-tooltip>
              </a-space>
            </template>
          </a-table-column>
        </TableTurn>
        <a-button type="text" @click="addLevel">
          <template #icon>
            <icon-plus />
          </template>
          新增等级
        </a-button>
      </div>
    </a-space>
  </ContentCard>
</template>

<script lang="ts" setup>
import {
  PostPerformanceLevel,
  GetPerformanceLevelList,
  GetPerformanceLevelRepeat,
  PutPerformanceLevelStatus,
  GetPerformanceLevelSetting,
  PutPerformanceLevel,
  DelPerformanceLevel
} from '@/apis/management/performance/baseSetting/level';
import {
  PerformanceLevel,
  PerformanceLevelStatus
} from '@/apis/management/performance/baseSetting/level/type';

import TableTurn, { type paramsType } from '@/components/TableTurn/index.vue';
import ColorPiker from '@/components/ColorPiker.vue';

const title = '绩效等级设置';

const breadCrumb: string[] = ['人事', '基础设置', '其他设置', '绩效等级设置'];
/**
 * 查重
 */
const validateName = async (value: any) => {
  const res = await GetPerformanceLevelRepeat({ name: value });
  if (res?.code === 400) {
    return false;
  }
  return true;
};
const levelSetting = ref<PerformanceLevelStatus>({
  performanceLevelSettingStatus: 2,
  distributionRule: 2
});
const checkValue = computed({
  get: () => {
    return levelSetting.value.distributionRule === 1 ? true : false;
  },
  set: (val) => {
    levelSetting.value.distributionRule = val ? 1 : 2;
  }
});
const getLevelSetting = async () => {
  levelSetting.value = await GetPerformanceLevelSetting();
};
getLevelSetting();
// 获取数据
const getPerformanceLevelList = async (params: paramsType) => {
  try {
    const res = await GetPerformanceLevelList(params);
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
const tableRef = ref();
const refresh = () => {
  tableRef.value.loadData();
};
const addLevel = async () => {
  const params: PerformanceLevel = { name: '', color: '' };
  await PostPerformanceLevel(params);
  refresh();
};
const del = async (id: number) => {
  await DelPerformanceLevel({ ids: [id] });
  refresh();
};
const change = async (
  data: PerformanceLevel & { error: boolean; msg: string },
  isValidate?: boolean
) => {
  if (isValidate) {
    data.error = false;
    const r = await validateName(data.name);
    if (!r) {
      data.error = true;
      data.msg = '名称已存在';
      return;
    }
  }

  await PutPerformanceLevel(data);
};
const changeStatus = async () => {
  await PutPerformanceLevelStatus(levelSetting.value);
};
</script>

<style scoped lang="less">
.wrap {
  // padding: 10px 20px;

  .reminding {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }

  .send {
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .level-input {
    // width: 100px;
  }
  .level-lable {
    white-space: nowrap;
  }
}
.level {
  text-align: center;
}
</style>
